<template>
	<div>
		<div class="dtdatil_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size:1.8rem;" @click="fh"></i>
			<span class="flex1">动态</span>
			<span style="font-size: 1.6rem;color: #b042ff;float: right;margin-right: 4%;" @click="jb">投诉</span>
		</div>
		<div class="dtjb clear2">
			<span  style="float: left;">被投诉人</span>
			<span  style="float: right;color: #5a5e66;">{{message.username}}</span>
		</div>
		<div class="dtjb clear2">
			<span  style="float: left;">被投诉ID</span>
			<span  style="float: right;color: #5a5e66;">{{message.uid||message.id}}</span>
		</div>
		<div class="dtjb clear2">
			<span  style="float: left;">投诉原因</span>
			<label for="txsy" style="float: right;">
				{{report_type}}
				<i class="el-icon-arrow-right"></i>
			</label>
			<select  id='txsy' style="opacity: 0;position: absolute;z-index: -1;left: 0;" v-model="report_type">
				<option value="请选择" label="请选择"></option>
				<option value="头像/资料虚假" label="头像/资料虚假"></option>
				<option value="钱财诈骗" label="钱财诈骗"></option>
				<option value="色情相关" label="色情相关"></option>
				<option value="发广告" label="发广告"></option>
				<option value="婚介" label="婚介"></option>
				<option value="其他" label="其他"></option>
			</select>
		</div>
		<div class="dtjb clear2">
			<el-input
			  type="textarea"
			  placeholder="请输入详细投诉说明"
			  v-model="reason"
			  style='border: 0;'
			  :maxlength='500'
			  >
			</el-input>
			<span style="font-size: 1.5rem;float: right;color: rgb(102, 102, 102);">{{reason.length}}/500</span>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				message:{},
				report_type:'请选择',
				reason:''
			}
		},
		mounted() {
			this.message=JSON.parse(this.$route.query.data);
			console.log(this.message)
		},
		methods: {
			fh(){
        		window.history.go(-1);
        	},
        	jb(){
        		let model={};
        		if(this.$route.query.type){
        			if(this.$route.query.type==1){
        				model={
        					uid: window.uid,
        					b_uid:this.message.id,
        					type:1,
        					report_type:this.report_type,
        					reason:this.reason,
        				}
        			}
        		}
        		else{
        			model={
    					uid: window.uid,
						b_uid:this.message.uid,
						dy_id:this.message.d_id,
						type:2,
						report_type:this.report_type,
						reason:this.reason,
    				}
        		}
        		this.$http.post(this.defines.setUserReport, model, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								Toast('投诉成功');
								this.fh();
							}
							else{
								Toast(data.data.errmsg);
							}
						},
						(error) => {
							console.log(error);
						}
					);
        	}
		}
	}
</script>

<style scoped>
	
	
	.dtdatil_title {
		background: #fff;
	    text-align: center;
	    color: #1c1c1c;
	    font-size: 1.6rem;
	    line-height: 1.6rem;
	    padding: 3% 0;
	    border-bottom: 1px solid #e7e9ee;
	}
	.dtjb {
		width: 94%;
		color: #4a4a4a;
		font-size: 1.4rem;
		line-height: 3.5rem;
		padding: 0.7rem 3%;
		border-bottom: 1px solid #f3f3f3;
	}
</style>
<style>
	.dtjb textarea{
		border: 0px !important;
		min-height: 100px !important;
		padding: 0 !important;
		
	}
</style>